<template>
    <div id="f2e">
        <div class="banner">
            <img src="@/assets/images/expert/banner.png" alt="">
        </div>

        <div class="main">
            <Gallery class="w">
                <img slot="l" :src="require('@/assets/images/f2e/1.png')" alt="" srcset="">
                <div class="w-desc" slot="r">
                    <h2>什么是HTML5/Web前端工程师?</h2>
                    <p style="margin-bottom: 60px;">HTML5/Web前端工程师是协调前端设计师、后端程序员实现网站页面或程序的界面美化、交互体验的一个职位。</p>
                    <h2>HTML5/Web前端的技术要求?</h2>
                    <p>精通HTML5、CSS3、JavaScript、JQuery、Ajax等这些核心的Web前端技术，具备互联网交互设计能力，熟悉后端服务器运行环境和数据通信协议，掌握响应式布局框架、AngularJS、Vue.js、React.js等新的JS框架及App开发技能的软件技术人才。</p>
                </div>
            </Gallery>

            <!-- <Panel class="demand" 
                   title="前端人才需求量"
                   title-font-size="32px"
                   :isLine="true"
                   title-color="#E54916">
                   <div class="demand-row">
                       <img :src="require('@/assets/images/f2e/demand_2.png')" alt="" srcset="">
                       <img :src="require('@/assets/images/f2e/demand_3.png')" alt="" srcset="">
                   </div>
            </Panel> -->

            <Panel class="employ" 
                   title="就业进大公司"
                   title-font-size="32px"
                   :isLine="true"
                   title-color="#E54916">
                       <img :src="require('@/assets/images/f2e/employ.png')" alt="" srcset="">
            </Panel>

            <Panel class="payment" 
                   title="就业薪酬"
                   title-font-size="32px"
                   :isLine="true"
                   title-color="#E54916">
            </Panel>

            <Panel class="classes" 
                   title="课程内容是否全面？"
                   title-font-size="32px"
                   :isLine="true"
                   title-color="#E54916">
                   <Gallery class="classes-row">
                       <div class="classes-row__desc" slot="l">
                           <h3>职位属性:</h3>
                           <p>前端的职位既需要对接设计，又需要对接后端的程序，起到承上启下的关键作用，这 个关键的职位属性，决定了其学的技术内容覆盖的技术面肯定要更为广泛。</p>
                           <h3>技能忌单一:</h3>
                           <p>就业定位，从企业招聘需求的看，没有任何一个企业会招聘只会JS、CSS的技能单一型求职者!</p>
                       </div>
                       <img slot="r" :src="require('@/assets/images/f2e/classes.png')" alt="" srcset="">
                   </Gallery>
            </Panel>

            <Panel class="enterprise" 
                   title="课程边学边练 企业实战项目"
                   title-font-size="32px"
                   :isLine="true"
                   title-color="#E54916">
                   <Gallery class="enterprise-row">
                       <div class="enterprise-row__desc" slot="l">
                           <p><span>A.相结合:</span>
                            手写代码+代码工具相结合！
                        </p>
                           <p><span>
                            B.功底扎实:
                        </span>
                            扎实代码功底，应对企业需求! 
                        </p>
                           <p><span>
                            C.弄懂后台:
                        </span>
                            清楚后台的前端，更有效的配合团队！
                        </p>
                           <p><span>
                            D.擅长混编:
                        </span>
                            混合编程APP开发，发展前景更广阔！
                        </p>
                           <p><span>
                            E.小程序开发:
                        </span>
                            微信公众号、小程序开发，更符合市场需求！
                        </p>
                       </div>
                       <img slot="r" :src="require('@/assets/images/f2e/enterprise.png')" alt="" srcset="">
                   </Gallery>
            </Panel>

            <Panel class="projects" 
                   title="不同阶段的项目作品呈现"
                   title-font-size="32px"
                   :isLine="true"
                   title-color="#E54916">
                   <ul class="projects-wrap">
                       <li class="projects-item">
                            <img :src="require('@/assets/images/f2e/boya.png')" alt="" srcset="">
                            <h3>《博雅游戏网》上线项目</h3>                          
                       </li>
                       <li class="projects-item">
                            <img :src="require('@/assets/images/f2e/music.png')" alt="" srcset="">
                            <h3>《云音乐平台》</h3>                           
                       </li>
                       <li class="projects-item">
                            <img :src="require('@/assets/images/f2e/app.png')" alt="" srcset="">      
                            <h3>《购物商城》APP项目</h3>                     
                       </li>
                   </ul>
            </Panel>

            <Panel class="course" 
                   title="课程大纲"
                   title-font-size="32px"
                   :isLine="true"
                   title-color="#E54916">
                    <div class="course-wrap">
                        <img :src="require('@/assets/images/f2e/c1.png')" alt="" srcset="">      
                        <img :src="require('@/assets/images/f2e/c2.png')" alt="" srcset="">      
                        <img :src="require('@/assets/images/f2e/c3.png')" alt="" srcset="">      
                        <img :src="require('@/assets/images/f2e/c4.png')" alt="" srcset="">      
                    </div>
            </Panel>
        </div>
    </div>
</template>

<script>
import Gallery from '@/components/Gallery'
import Panel from '@/components/Panel'
export default {
    components: {
        Gallery,
        Panel
    }
}
</script>

<style lang="less" scoped>
img{
    max-width: 100%;
}

.w{
    margin-bottom: 150px;
    &-desc{
        margin-left: 100px;
        h2{
            font-size:34px;
            font-family:MicrosoftYaHei-Bold;
            font-weight:bold;
            background:linear-gradient(0deg,rgba(228,73,23,1) 29.8095703125%, rgba(240,135,25,1) 100%);
            -webkit-background-clip:text;
            -webkit-text-fill-color:transparent;
            margin-bottom: 26px;
        }
        p{
            color:rgba(102,102,102,1);
            line-height:35px;
            font-size: 22px;
        }
    }
}
// 需求
.demand{
    &-row{
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
}

// 课程
.classes{
    &-row__desc{
        line-height: 39px;
        h3{
            font-size: 26px;
            color: #E54916;
        }
        p{
            color: #999;
            font-size: 22px;
        }
    }
}

// 实战项目
.enterprise{
    &-row__desc{
        line-height: 51px;
        font-size: 24px;
        color: #666;
        margin-right: 90px;
        span{
            color: #E54916;
        }
    }
}

// 项目展示
.projects{
    .projects-wrap{
        list-style: none;
        margin: 0;
        padding: 0;
        font-size: 0;
        .projects-item{
            margin-bottom: 20px;
        }
        h3{
            color: #666;
            font-size: 26px;
            text-align: center;
        }
    }
}

.course{
    text-align: center;
}
</style>
